import React from 'react'
import CustomButton from "../../../../../shared-components/CustomButton/CustomBotton"
import {withRouter,} from 'react-router-dom'
import CheckinIcon from "../../../../../res/images/web/my/calendar@2x.png"
import {List,} from 'antd-mobile'
import './UserCoinsAndCheckIn.css'
import DailyIcon from '../../../../../res/images/web/my/daily assignment@2x.png'
import TriIconRight from '../../../../../res/images/web/my/little triangle grey@2x.png'

const UserCoinsAndCheckIn = props => {

    const {
        checkinInfo: {
            signtoday,
            seq,
        },
        checkIn,
        Gold,
    } = props

    const Item = List.Item
    const Brief = Item.Brief
    const history = props.history

    const checkInBtn = (signtoday ?
            <CustomButton
                inline='true'
                size='small'
                bg='#E8E8E8'
                color='#333'
            >
                <span style={{opacity: '0.5'}}>已签到</span>
            </CustomButton>
            : <CustomButton
                inline='true'
                size='small'
                onClick={checkIn}
                bg='#FFA500'
                // shadow='0px 2px 4px 0px rgba(250,114,104,0.4)'
            >立即签到</CustomButton>
    )

    // const userTemplate = (
    //     <List>
    //         <Item
    //             style={{borderRadius: '8px', height: '92px'}}
    //             thumb={CheckinIcon}
    //             extra={checkInBtn}
    //         >
    //             <span>我的金币</span>
    //             <span className='my-user-coins-and-checkin-coin'>{Gold}</span>
    //             <Brief>已连续签到{seq}天</Brief>
    //         </Item>
    //     </List>
    // )


    return <div
        style={{
            width: '100%',
            height: '92px',
            borderRadius: '8px',
            background: '#fff',
        }}
    >

        <List>
            <Item
                style={{borderRadius: '8px', height: '92px'}}
                thumb={CheckinIcon}
                extra={checkInBtn}
            >
                <span>我的金币</span>
                <span className='my-user-coins-and-checkin-coin'>{Gold}</span>
                <Brief>已连续签到 {seq} 天</Brief>
            </Item>
        </List>

        {/*<div*/}
        {/*    style={{*/}
        {/*        borderTop: '1px solid rgba(248,248,248,1)',*/}
        {/*        margin: '0 15px',*/}
        {/*        height: 141 - 93,*/}
        {/*    }}*/}
        {/*    className='flex-space-between-align-center'*/}
        {/*    onClick={() => history.push('./task')}*/}
        {/*>*/}
        {/*    */}
        {/*    <div*/}
        {/*        className='flex-center-align-center'*/}
        {/*    >*/}
        {/*        <img*/}
        {/*            alt=''*/}
        {/*            src={DailyIcon}*/}
        {/*            style={{*/}
        {/*                width: 91,*/}
        {/*                height: 32,*/}
        {/*                marginLeft: '-15px',*/}
        {/*                marginRight: 7,*/}
        {/*            }}*/}
        {/*        />*/}
        {/*        <span*/}
        {/*            style={{*/}
        {/*                color: 'rgba(51,51,51,0.6)',*/}
        {/*                lineHeight: '20px',*/}
        {/*                fontSize: '14px',*/}
        {/*            }}*/}
        {/*        >今日份奖励领取了吗？</span>*/}
        {/*    </div>*/}

        {/*    <div*/}
        {/*        className='flex-align-center'*/}

        {/*    >*/}
        {/*        <span*/}
        {/*            style={{*/}
        {/*                fontSize: '12px',*/}
        {/*                color: '#B8B8B8',*/}
        {/*                marginRight: '4px',*/}
        {/*            }}*/}
        {/*        >*/}
        {/*            查看更多*/}
        {/*        </span>*/}
        {/*        <img alt='' src={TriIconRight} style={{width: 6, height: 6,}}/>*/}
        {/*    </div>*/}
        {/*</div>*/}

    </div>
    // return userTemplate
}

export default withRouter(UserCoinsAndCheckIn)
